<template>
	<div class="newscreen1-module3-content">
		<div class="counts-item">
			<div class="label">利用率</div>
			<div class="content no-wrap">
				<span class="count-number">{{counts.count1}}</span>
				<span class="unit">%</span>
			</div>
		</div>
		<div class="counts-item">
			<div class="label">货物种类</div>
			<div class="content no-wrap">
				<span class="count-number">{{counts.count2}}</span>
				<span class="unit">种</span>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	counts:{
		type:Object,
		default:function(){
			return {
				count1:0,
				count2:0
			}
		}
	}
})
</script>

<style scoped lang="scss">
.newscreen1-module3-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: .8em 0;
	box-sizing: border-box;
	.counts-item{
		display: flex;
		align-items: baseline;
		line-height: normal;
		&>.label{
			flex-shrink: 0;
			font-size: .3em;
			color: white;
			width: 6.5em;
			display: flex;
			justify-content: flex-end;
		}
		&>.content{
			flex-grow: 1;
			width: 1px;
			color: #DBDD07;
			padding-left: .4em;
			.count-number{
				font-family: electronicFont;
				font-size: 1em;
			}
			.unit{
				margin-left: .4em;
				font-size: .3em;
			}
		}
	}
}
</style>